<template>
    <div class="asideNav">
            <el-row>
                <el-col :span="24">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#304156"
                text-color="#eee"
                :unique-opened="true"
                active-text-color="#0F9BEC">
                <el-menu-item index="1">
                    <i class="iconfont icon-shouye2 icon-menu"></i>
                    <span>首页</span>
                </el-menu-item>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="iconfont icon-shangpin-tianchong icon-menu"></i>
                        <span slot="title">所有商品</span>
                    </template>
                    <el-menu-item-group>
                        <router-link to="/commodity">
                            <el-menu-item index="2-1">商品列表</el-menu-item>
                        </router-link>
                        <router-link to="/addCommodity">
                            <el-menu-item index="2-2">添加商品</el-menu-item>
                        </router-link>
                        <router-link to="/category">
                            <el-menu-item index="2-3">商品分类</el-menu-item>
                        </router-link>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="iconfont icon-dingdan icon-menu"></i>
                        <span slot="title">全部订单</span>
                    </template>
                    <el-menu-item-group>
                        <router-link to="/payment">
                            <el-menu-item index="3-1">待付款</el-menu-item>
                        </router-link>
                        <router-link to="/payment">
                            <el-menu-item index="3-2">待发货</el-menu-item>
                        </router-link>
                        <router-link to="/payment">
                            <el-menu-item index="3-3">待收货</el-menu-item>
                        </router-link>
                        <router-link to="/payment">
                            <el-menu-item index="3-4">已收货</el-menu-item>
                        </router-link>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="4">
                        <i class="iconfont icon-yonghuzhongxin icon-menu"></i>
                        <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="5">
                    <i class="iconfont icon-shezhi icon-menu"></i>
                    <span slot="title">我的账户</span>
                </el-menu-item>
                </el-menu>
            </el-col>
            </el-row>
        </div>
</template>

<script>
export default {
    name:'Nav',
    data(){
        return {

        }
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelect(key, keyPath){
        console.log(key, keyPath)
      }
    }
}
</script>

<style lang="less">
.asideNav{
    float: left;
    width: 180px;
    height: 100%;
    background: #304156;
    .el-menu{
        border-right: none;

        .el-menu-item-group{
            background-color: black;
            
            .el-menu-item-group__title{
                display: none;
            }

            a{
                text-decoration: none;
                font-weight: 500;

                .el-menu-item{
                    min-width: 0;
                    text-align: center;
                }
            }
            
        }

        .icon-menu{
            margin-right: 10px;
            margin-left: 5px;
            width: 24px;
            text-align: center;
            font-size: 18px;
            vertical-align: middle;
        }
    }
}
</style>